//学习东西要从磁盘io、网络等角度考虑，而不是从框架或代码怎么使用考虑问题，前者是思考逻辑，后者是文档类的使用，不是思考问题的方式
<template>
	<view class="setup-container">
		<view class="top-box">
			<image :src="defaultPic" class="avatar" @click="chooseUniImage"></image>
			<view class="userinfo">
				<text>昵称:{{this.userinfo.nickname||'无'}}</text>
				<text>账号:{{this.userinfo.account}}</text>
			</view>
		</view>
		<view class="panel">
			<!-- <view class="setup-item-underline">
				<text>记账分类管理</text>
				<uni-icons type="right"></uni-icons>
			</view> -->
			<view class="setup-item-underline" @click="getExportFile">
				<text>导出数据</text>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="setup-item-underline">
				<text>导入数据</text>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="setup-item-underline" @click="onInstructions">
				<text>使用须知</text>
				<uni-icons type="right"></uni-icons>
			</view>
			<view  class="setup-item-underline" @click="onContactUs">
				<text>支持与联系我们</text>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="setup-item" @click="onTools">
				<text>小工具</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="bottom-box">
			<button type="default" @click="getExit" class="btnExit">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		createFlie
	} from '../../utils/file.js'
	
	export default {
		data() {
			return {
				// defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
				defaultPic: '../../static/camera/my-active.png'
			}
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		onLoad() {
			// console.log('本地数据', this.userinfo)
		},
		methods: {
			...mapMutations('m_user', ['updateUserinfo']),
			async getExportFile() {
				let newHtmlStr = `<html><head></head><body>
				      <table border="1">
				        <tr style="height:50px;font-size:16px;font-weight:bold;font-family: 微软雅黑;">
				          <td style="background-color: skyblue;">金额</td>
				          <td style="background-color: skyblue;">备注</td>
						  <td style="background-color: skyblue;">时间</td>
				        </tr>
						<tr>
						<td>200元</td>
						<td>收入</td>
						<td>2024.09.01</td>
						</tr>
						<tr>
						<td>20元</td>
						<td>支出</td>
						<td>2024.09.02</td>
						</tr>
				      </table></body></html>`;

				const res = await createFlie('记账.xlsx', newHtmlStr)
				uni.$showMsg(res)
			},
			chooseUniImage() {
				//uni.chooseImage:app客户端不支持
				uni.chooseImage({
					count: 1,
					// sourceType: ['camera'],					
					success: function(res) {
						console.log(res.tempFilePaths[0])
						//保存到本地相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePaths[0],
							success: function() {
								console.log('save success');
							}
						});
						//uni						
						const str = res.tempFilePaths[0]
						const camera = str.indexOf('camera')
						const path = str.substring(camera).trim()
					}
				});
			},
			// 拍照
			uppicture() {
				var cmr = new plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				var file_path = "";
				console.log("Resolution: " + res + ", Format: " + fmt);
				var filepath = null;
				cmr.captureImage(function(path) {
					filepath = path.split("/")[1];
					console.log(":::" + filepath)
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						file_path = entry.toLocalURL();
						console.log(file_path + ":::" + filepath)
					}, function(e) {
						outLine("读取拍照文件错误：" + e.message);
					});
				}, function(error) {
					alert("Capture image failed: " + error.message);
				}, {
					resolution: res,
					format: fmt
				});
			},
			chooseImage() {
				plus.gallery.pick((path) => {
					console.log(path); // 选择的图片路径
					// 处理选择的图片，例如显示在页面上
				}, (error) => {
					console.error(error.message); // 选择图片失败的处理
				}, {
					multiple: false, // 是否允许选择多个文件
					system: false, // 是否从系统相册选择
					onmaxed: () => {
						uni.showToast({
							title: '选择的文件数量已达到上限',
							icon: 'none'
						});
					}
				});
			},
			//使用须知
			onInstructions() {
				uni.navigateTo({
					url: '/subpkg/instruction/instruction?isContactUs=false'
				})
			},
			//支持与联系我们
			onContactUs() {
				uni.navigateTo({
					url: '/subpkg/instruction/instruction??isContactUs=true'
				})
			},
			onTools(){
				uni.navigateTo({
					url:'/pages/home/home'
				})
			},
			//退出登录
			getExit() {
				// const succ = await uni.showModal({
				// 	title: '提示',
				// 	content: '确认退出登录吗?'
				// }).catch(err => err)
				// if (succ && succ.confirm) {
				// 	this.userinfo({})
				// 	uni.reLaunch({
				// 		url: '/pages/login/login'
				// 	})
				// }

				this.updateUserinfo({})
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.setup-container {
		margin: 0 10px 0 10px;
		padding-right: 10px;

		.top-box {
			display: flex;
			flex-direction: row;
			height: 50px;
			margin: 10px 0 15px 0;

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 45px;
				border: 2px solid #F4F4F4;
				box-shadow: 0 1px 5px black;
			}

			.userinfo {
				padding-left: 15px;
				display: flex;
				flex-direction: column;
				// justify-content: left;
				// align-items: left;
				line-height: 25px;
			}
		}

		.panel {
			border-radius: 10px;
			background-color: white;
			height: 250px;

			.setup-item-underline {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 50px;
				margin-left: 10px;
				align-items: center;
				border-bottom: 1rpx solid gainsboro;
			}

			.setup-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 50px;
				margin-left: 10px;
				align-items: center;
			}
		}

		.bottom-box {
			padding-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btnExit {
				width: 70%;
			}
		}
	}
</style>